<template>
    <div class="detail-container">

        <!--滚动区域-->
        <div id="mainScroll">
            <div class="uncheck-tip hairline-tb" v-if="detailData.auditCode == 1">
                <i class="tip-icon"></i>
                <span class="tip-text">您所提供的信息正在审核中，请耐心等待。</span>
            </div>
            <!--内容详情-->
            <div class="detail-content hairline-bottom" v-if="isShowContent">
                <div class="content"><a class="subject-link" @click.stop="goSubject(detailData.subjectId)">{{detailData.subjectName}}</a><span class="detail-content-com" v-html="detailData.content"></span></div>
                <div class="img-box" v-for="(item, index) in detailData.photos">
                    <img class="detail-img" :src="item.fileUrl | thumbnail('_750_2048_100_0')" alt="">
                </div>

                <div class="sub-info-box">
                    <span class="time" v-text="detailData.createTime"></span>
                    <!-- auditCode  -->
                    <div class="sub-info" v-if="detailData.auditCode == 3">
                        <span class="vote-box" @click="praise" :class="{'active': detailData.praised}">
                            <i class="vote-icon"></i>
                            <i class="vote-num" >{{detailData.praiseCount | changeVote }}</i>
                        </span>
                        <span>
                            <i class="discuzz"></i>
                            <i class="discuzz-num" >{{detailData.commentCount | changeDis }}</i>
                        </span>
                    </div>
                    <div class="uncheck" v-if="detailData.auditCode == 1">审核中</div>
                    <div class="unpass" v-if="detailData.auditCode == 2">未通过</div>
                </div>

            </div>
            <!--评论列表-->
            <div class="comment-list-box" :class="{'hairline-top': commentList.length, 'hairline-bottom':  commentList.length}" v-if="detailData.auditCode == 3">
                <div v-if="commentList.length" class="comment-list-item" v-for="(item, index) in commentList">
                    <div class="avator-container" @click="goFrame(item.feedId)">
                        <div class="avator-box" >
                            <i :style="'background-image:url('+item.commentAvator+')'"></i>
                        </div>
                    </div>
                    <div class="comment-container" :class="{'hairline-bottom': index < commentList.length - 1}">
                        <div class="comment-title">
                            <span class="comment-user" v-text="item.commentName" ></span>
                            <span class="comment-time">
                                <span>{{item.commentTime | changeTimeYMD }}</span>
                            </span>
                        </div>
                        <div class="comment-content" v-text="item.commentContent">

                        </div>
                    </div>
                </div>

                <div v-if="showComment && commentList.length == 0">
                    <div class="sofa-box">
                        <div class="sofa-text">
                            恭喜你，抢到了头把交椅！坐下来，说点什么吧...
                        </div>
                    </div>
                </div>
            </div>

            <div id="more" data-gap="100"></div>
        </div>
        <!--fixed 输入框-->
        <div class="submit-box hairline-top" :class="{'alert': alert}" v-if="detailData.auditCode == 3">
            <!--<input type="text" class="submit-input"  maxlength="100"  placeholder="说点什么" v-model="content">-->
            <textarea class="submit-text" ref="submitText" :class="{'alert': alert}" placeholder="说点什么" v-model="content" maxlength="140" @input="textFoucs(true)" @change="textFoucs(true)" @focus="textFoucs(true)" @blur="textFoucs(false)"></textarea>
            <div class="submit-btn" @click="addComment">发布</div>
        </div>
    </div>
</template>

<script>
import detail from './detail-praising';
export default detail;
</script>

<style scoped>
.uncheck-tip {
    background: #FFF8F0;
    height: 44px;
    line-height: 21px;
    padding: 11px 15px 12px;
    overflow: hidden;
}

.tip-icon {
    display: block;
    width: 21px;
    height: 21px;
    background: url('../img/tip.png') center no-repeat;
    float: left;
    background-size: 21px;
    margin-right: 4px;
}

.tip-text {
    font-size: 14px;
    color: #333333;
    letter-spacing: 0;
    line-height: 21px;
    float: left
}
/*专题*/
a.subject-link{
  color: #12418E;
}

/** 详情 **/

#mainScroll {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    padding-bottom: 67px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.detail-content {
    padding: 15px 15px 0px 15px;
    background: #fff;
    width: 100%;
}

.tip-text {
    display: inline-block;
}

.img-box,
.img-box-t {
    /*height: 194px;*/
    line-height: 0;
}

.img-box {
    margin-bottom: 10px;
    width: 100%;
}

.img-box-t {}

.detail-img {
    height: 100%;
}

.content {
    margin-bottom: 10px;
    font-size: 15px;
    color: #000000;
    line-height: 27px;
}

.sub-info-box {
    line-height: 18px;
    padding-bottom: 13px;
    overflow: hidden;
    height: 47px;
    padding: 10px 0 19px;
    line-height: 18px;
}

.time {
    float: left;
    font-size: 14px;
    color: #8E8E93;
}

.sub-info {
    float: right;
    /*font-size: 0;*/
}

.vote-box .vote-icon {
    background: url('../img/novote.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-right: 5px;
    margin-top: -2px;
}

.vote-box.active .vote-icon {
    background: url('../img/vote.png') no-repeat center;
    background-size: cover;
}

.vote-box .vote-num {
    font-size: 14px;
    color: #868686;
    margin-right: 35px;
    vertical-align: middle;
}

.vote-box.active .vote-num {
    color: #DF3031;
}

.discuzz {
    background: url('../img/discuzz.png') no-repeat center;
    background-size: cover;
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: middle;
    margin-right: 5px;
}

.discuzz-num {
    font-size: 14px;
    color: #868686;
    vertical-align: middle;
}




/** 评论列表 **/

.comment-list-box {
    margin-top: 11px;
    padding: 0 15px;
    background: #fff;
}

.comment-list-item {
    padding-top: 15px;
    overflow: hidden;
}

.avator-container {
    width: 32px;
    float: left;
    min-height: 1px;
}

.avator-box {
    font-size: 0;
    border-radius: 50%;
    background: #eee;
    overflow: hidden;
    background-position: center;
    background-size: 80%;
    background-repeat: no-repeat;
    background-image: url(../img/default-headimage.png);
}

.avator-box i {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-position: center;
    background-size: 100%;
}

.comment-container {
    width: 303px;
    margin-left: 10px;
    float: left;
    padding-bottom: 10px;
}

.comment-title {
    font-size: 15px;
    color: #222222;
    letter-spacing: 0;
    overflow: hidden;
    line-height: 15px;
    height: 15px;
}

.comment-user {}

.comment-time {
    float: right;
    font-size: 13px;
    color: #999999;
}

.comment-content {
    margin-top: 8px;
    font-size: 15px;
    color: #222222;
    line-height: 24px;
}

.submit-box {
    height: 56px;
    margin-top: 11px;
    position: relative;
    background: #F9F9F9;
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    box-shadow: 0 -1px 2px 0 #DDDEE3;
    padding: 17px 15px;
}

.submit-box.alert {
    padding: 6px 15px;
}

.submit-input {
    margin-top: 13px;
    height: 32px;
    padding-left: 15px;
}

.submit-text {
    font-family: STHeitiSC-Light;
    height: 22px;
    font-size: 17px;
    line-height: 22px;
    overflow: auto;
    resize: none;
    box-sizing: border-box;
}

.submit-text.alert {
    height: 44px;
}

.submit-btn {
    background: #DF3031;
    font-size: 15px;
    color: #FFFFFF;
    border-radius: 2px;
    width: 60px;
    height: 32px;
    line-height: 32px;
    position: absolute;
    right: 12px;
    top: 13px;
    text-align: center;
}



/* 抢沙发 */

.sofa-box {
    padding: 60px 30px 76px;
}

.sofa-text {
    text-align: center;
    font-size: 16px;
    color: #222222;
    letter-spacing: 0;
    line-height: 22px;
}

.uncheck {
    float: right;
    font-size: 17px;
    color: #DF3031;
}

.unpass {
    float: right;
    font-size: 17px;
    color: #DF3031;
}
</style>


